<template>
  <div>
    <header>
      <!-- 头部 -->
      <detail-header></detail-header>
    </header>
    <main>
      <!-- 商品详情获取数据 -->
      <div class="product-info">
        <!-- 品牌 -->
        <div class="shop">
          <img :src="detailInfo.shopImg" alt="品牌" />
          <span>{{ detailInfo.shortName }} &gt;</span>
        </div>
        <!-- 商品图 -->
        <div class="product-img">
          <img :src="detailInfo.imgurl" alt="商品图片" />
          <!-- 成分表 -->
          <section class="ingredient-list">
            <span>全成分表</span>
            <b>16种成分&gt;</b>
          </section>
        </div>
        <!-- 商品标题 -->
        <div class="product-title">
          <h3>{{ detailInfo.title }}</h3>
          <p>{{ detailInfo.engName }}</p>
        </div>
        <!-- 商品参数 -->
        <div class="product-caption">
          <section class="left">
            <p>产地 : {{ detailInfo.producingArea }}</p>
            <p>参考价格 : {{ detailInfo.price }}</p>
            <p>功效 : {{ detailInfo.function }}</p>
          </section>
          <section class="right">
            <img
              src="../../assets/images/instructionsForUse.png"
              alt="使用说明"
            />
            <span>使用说明</span>
          </section>
        </div>
      </div>
      <!-- 适合皮肤范围 -->
      <detail-fix></detail-fix>
      <!-- 官方链接 -->
      <detail-official></detail-official>
      <!-- 点评 -->
      <detail-remark></detail-remark>
      <!-- 热评 -->
      <detail-comment></detail-comment>
    </main>
    <footer>
      <!-- 底部 -->
      <detail-footer></detail-footer>
    </footer>
  </div>
</template>
<script>
import DetailFooter from "../../components/detail/DetailFooter";
import DetailComment from "../../components/detail/DetailComment";
import DetailRemark from "../../components/detail/DetailRemark";
import DetailFix from "../../components/detail/DetailFix";
import DetailHeader from "../../components/detail/DetailHeader";
import DetailOfficial from "../../components/detail/DetailOfficial.vue";
import { getDetailDataApi } from "@/utils/api";
// 引入顶部进度条插件
import NProgress from "nprogress";
export default {
  props: ["id"],
  data() {
    return {
      detailInfo: {},
    };
  },
  // 组件内的守卫
  // 在渲染该组件的对应路由被 confirm 前调用
  // beforeRouteEnter 守卫 不能 访问 this
  // 因为当守卫执行前，组件实例还没被创建,不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
  async beforeRouteEnter(to, from, next) {
    // 只需要调用NProgress的 start() 和 done() 的API来控制进度条
    NProgress.start();
    // beforeRouteEnter 守卫 不能 访问 this
    // 先去请求数据,请求得到以后再next
    const res = await getDetailDataApi({
      // 动态参数要用to去获取
      id: to.params.id,
    });
    NProgress.done();
    // 通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
    next((vm) => (vm.detailInfo = res.result));
    // console.log(res);
    // console.log(res.result);
  },

  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
  beforeRouteUpdate(to, from, next) {
    this.getDetailInfo(to.params.id);
    next();
  },

  methods: {
    async getDetailInfo(id) {
      const res = await getDetailDataApi({ id: id || this.id });
      if (res.status === 0) {
        this.detailInfo = res.result;
      }
    },
  },

  components: {
    DetailHeader,
    DetailFix,
    DetailOfficial,
    DetailRemark,
    DetailComment,
    DetailFooter,
  },
};
</script>

<style lang="less" scoped>
.product-info {
  width: 100%;
  padding-top: 32px;

  .shop {
    margin-left: 30px;
    width: 178px;
    height: 74px;
    background: #7f7f7f;
    border-radius: 37px;
    position: relative;

    img {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      position: absolute;
      left: 5px;
      top: 5px;
    }

    span {
      position: absolute;
      left: 77px;
      font-size: 28px;
      line-height: 74px;
      color: #fff;
    }
  }

  .product-img {
    width: 100%;
    height: 400px;
    position: relative;

    img {
      position: absolute;
      left: 275px;
      top: 120px;
      width: 200px;
      height: 200px;
    }

    .ingredient-list {
      position: absolute;
      left: 550px;
      top: 180px;
      width: 168px;
      color: #4caaaa;

      span {
        display: block;
        width: 100%;
        height: 48px;
        border: 2px solid #64c8c8;
        font-size: 24px;
        line-height: 48px;
        text-align: center;
        margin-bottom: -2px;
        background: #e8f8f8;
      }

      b {
        display: block;
        width: 100%;
        height: 72px;
        font-size: 28px;
        line-height: 72px;
        background: #ffffff;
        border: 2px solid #64c8c8;
        border-radius: 0px 0px 6px 6px;
        text-align: center;
      }
    }
  }

  .product-title {
    text-align: center;

    h3 {
      font-size: 34px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 48px;
    }

    p {
      font-size: 24px;
      font-family: PingFang SC;
      color: #666666;
      line-height: 48px;
    }
  }

  .product-caption {
    height: 200px;
    padding: 0 40px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

    .left {
      font-size: 24px;
      font-family: PingFang SC;
      color: #666666;
      line-height: 48px;
    }

    .right {
      font-size: 24px;
      font-family: PingFang SC;
      color: #333333;
      line-height: 27px;

      img {
        width: 22px;
        height: 27px;
        margin-right: 10px;
        vertical-align: middle;
      }

      span {
        vertical-align: middle;
      }
    }
  }
}
</style>
